<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-common-layout">
      <div class="JNPF-preview-main"
           style="background-color: rgb(240,242,245)!important;color: black!important;font-weight: 500"
      >
        <el-page-header @back="goBack" content="安全巡检" style="font-weight:100"/>
        <el-form style="margin-top: 30px" ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px"
                 label-position="left"
        >
          <template v-if="!loading">
            <el-row :gutter="20">
            <el-col :span="24">
              <el-card class="mb-20" shadow="always">
                <el-col :span="6">
                  <el-form-item label="项目"
                                prop="projectId"
                  >
                    <el-input v-model="dataForm.projectId"
                              placeholder="请输入" clearable :style='{"width":"100%"}'
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="计划名称"
                                prop="planName"
                  >
                    <el-input v-model="dataForm.planName"
                              placeholder="请输入" clearable :style='{"width":"100%"}'
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="生效日期"
                                prop="effectDate"
                  >
                    <el-date-picker v-model="dataForm.effectDate"
                                    placeholder="请选择" clearable :style='{"width":"100%"}' type="date"
                                    format="yyyy-MM-dd" value-format="timestamp"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="失效日期"
                                prop="lapseData"
                  >
                    <el-date-picker v-model="dataForm.lapseData"
                                    placeholder="请选择" clearable :style='{"width":"100%"}' type="date"
                                    format="yyyy-MM-dd" value-format="timestamp"
                    >

                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="巡检周期"
                                prop="cycle"
                  >
                    <el-radio-group v-model="dataForm.cycle"
                                    size="small"
                    >
                      <el-radio-button v-for="(item, index) in cycleOptions" :key="index" :label="item.id"
                                       :disabled="item.disabled"
                      >
                        {{ item.fullName }}
                      </el-radio-button>

                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="dataForm.cycle == '0'">
                  <el-form-item  label="间隔天数"
                                prop="generateConfig"
                  >
                    <el-input v-model="dataForm.generateConfig"
                              placeholder="请输入" clearable :style='{"width":"100%"}'
                    >

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="selectedDays.length>0 ">
                  <el-form-item label="生成任务时期"
                                prop="generateConfig"
                  >
                    <span>{{selectedDays.join(",")}}</span>
                  </el-form-item>
                </el-col>



                <el-col :span="6">
                  <el-form-item label="执行人"
                                prop="executorId"
                  >
                    <user-select v-model="dataForm.executorId"
                                 placeholder="请选择" clearable :multiple="true"
                    >
                    </user-select>
                  </el-form-item>
                </el-col>

              </el-card>
            </el-col>
            </el-row>
          </template>
        </el-form>
        <el-card>
          <div style="width: 100%;height: 40px;background-color: white;width: 108%;">
            <Popup    v-model="dataForm.lastmodifytime"
                      @addList="handleAddList"
                      placeholder="请选择" clearable field="assetName" interfaceId="612769091110831365"
                      :columnOptions="lastmodifytimecolumnOptions" propsValue="id" relationField="zcname"
                      popupType="dialog"
                      popupTitle="选择资产" popupWidth="800px"
                      hasPage :pageSize="20"
            >
            </Popup>
          </div>

          <el-table   border :data="dataForm.zcglpropertyrepairitemList" size="mini"

          >
              <el-table-column type="index" width="50" label="序号" align="center"/>
              <!--                          -->
              <el-table-column prop="thingName" label="资产名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.zcname }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="thingPrice" label="资产代码">
                <template slot-scope="scope">
                  <span>{{ scope.row.zcnumber }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="thingCount" label="资产标签">
                <template slot-scope="scope">
                  <span>{{ scope.row.zclabel }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="thingCount" label="资产地址">
                <template slot-scope="scope">
                  <span>{{ scope.row.address }}</span>
                </template>
              </el-table-column>



              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" class="JNPF-table-delBtn"
                             @click="deleteZcInfo(scope.$index)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
          </el-table>
          <div class="table-actions" @click="addzcglpropertyrepairitemList()">
          </div>
        </el-card>

        <!-- 固定在底部的按钮列 -->
        <div class="fixed-bottom">
          <button class="confirm-button" @click="goBack">返回</button>
          <button class="confirm-button" @click="handleConfirm">保存</button>
          <button class="confirm-button" @click="handleConfirm">保存并发布</button>
        </div>

        <!-- 选择框 -->
        <el-dialog :visible.sync="showDialog" title="选择日期" width="30%" :modal="false">
          <div class="days-grid">
            <div v-if="dataForm.cycle === '1'" v-for="(day, index) in weekDays" :key="index" class="day-item" :class="{ selected: selectedDays.includes(day) }" @click="toggleDay(day)">
              {{ day }}
            </div>
            <div class="days-grid1" v-if="dataForm.cycle === '2'"  >
              <div  v-for="day in 31" :key="day" class="day-item" :class="{ selected: selectedDays.includes(day) }" @click="toggleDay(day)">
                {{ day }}号
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmSelection">确 定</el-button>
      </span>
        </el-dialog>

      </div>
    </div>
  </transition>
</template>
<script>
import request from '@/utils/request'
import PrintBrowse from '@/components/PrintBrowse'
import Popup  from './PopupSelect'
export default {
  components: { PrintBrowse,Popup },
  props: [],

  data() {
    return {

      showDialog: false, // 控制选择框显示
      weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // 周几的选项
      selectedDays: [], // 选中的日期

      lastmodifytimecolumnOptions:[
        {
          value: 'fid',
          label: 'ID'
        },
        {
        value: 'zcname',
        label: '资产名称'
      }
        , {
          value: 'zclabel',
          label: '资产标签'
        }
        ,
        {
          value: 'zcnumber',
          label: '资产编码'
        },

        {
          value: 'address',
          label: '地址'
        }],

      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: '',
      dataForm: {
        id: '',
        projectId: '',
        planName: '',
        effectDate: '',
        lapseData: '',
        cycle: '0',
        generateConfig: '',
        executorId: [],
        lastmodifytime: ''
      },
      cycleOptions: [{ 'fullName': '天', 'id': '0' }, { 'fullName': '周', 'id': '1' }, {
        'fullName': '月',
        'id': '2'
      }, { 'fullName': '年', 'id': '3' }]

    }
  },
  computed: {},
  watch: {
    'dataForm.cycle'(newValue) {
      if (newValue === '1' || newValue === '2') {
        this.showDialog = true; // 当选择“周”或“月”时，显示选择框
        this.selectedDays = []; // 重置选中的日期
        this.dialogTitle = newValue === '1' ? '选择日期' : '选择月中的日期';
        this.dialogWidth = newValue === '1' ? '30%' : '50%'; // 调整对话框宽度
      }

    },
  },
  created() {

  },
  mounted() {
  },
  methods: {
    deleteZcInfo(index) {
      this.$confirm('此操作删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dataForm.zcglpropertyrepairitemList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleAddList(checkedRow) {
      // 接收子组件传递的 checkedRow 数据
      this.dataForm.zcglpropertyrepairitemList= checkedRow
      // 你可以在这里处理接收到的数据
    },
    toggleDay(day) {
      this.showDialog = true;
      const index = this.selectedDays.indexOf(day);
      if (index > -1) {
        this.selectedDays.splice(index, 1); // 取消选中
      } else {
        this.selectedDays.push(day); // 选中
      }

      this.dataForm.generateConfig = this.selectedDays
    },
    confirmSelection() {
      console.log('选中的日期:', this.selectedDays);
      this.showDialog = false;
    },

    handleConfirm(){
      this.dataForm.space =  this.dataForm.zcglpropertyrepairitemList.map(item => item.id).join(",");

      const dayMapping = {
        "周一": "1",
        "周二": "2",
        "周三": "3",
        "周四": "4",
        "周五": "5",
        "周六": "6",
        "周日": "7"
      };

// 使用正则表达式和数组来替换所有匹配的日期
      this.dataForm.generateConfig = this.dataForm.generateConfig.toString()
      this.dataForm.generateConfig = Object.entries(dayMapping).reduce((config, [day, value]) => {
        const regex = new RegExp(day, "g"); // 创建正则表达式，全局匹配
        return config.replace(regex, value);
      }, this.dataForm.generateConfig);


      this.dataForm.executorId = this.dataForm.executorId.join(",")


      delete this.dataForm.lastmodifytime
      request({
        url: '/api/property/inspection/plan/create',
        data:this.dataForm,
        method: 'post'
      }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.$emit('refresh', true)
          }
        })
      })


    },
    goBack(isRefresh) {
      this.$emit('close', isRefresh)
      // this.$router.push(`/zcgl/zcglcwbill/index?id=${this.id}`)
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      _dataAll.cycle = _dataAll.cycle ? JSON.parse(_dataAll.cycle) : []
      this.dataForm = _dataAll
    },

    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/property/inspection/plan/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    }
  }
}

</script>
<style scoped>
.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 周显示7列 */
  gap: 10px;
}
.days-grid1 {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 周显示7列 */
  gap: 10px;
}
.day-item {
  min-width: 65px;
  padding: 15px;
  border: 1px solid #ddd;
  cursor: pointer;
  text-align: center;
}

.day-item.selected {
  background-color: #409EFF;
  color: #fff;
}



/* 增加表格行高 */
/deep/.el-table .el-table__row {
  height: 60px; /* 你想要的行高 */
  border: 1px slategrey solid;
}
/* 如果你还想要调整单元格内部的垂直居中 */
/deep/.el-table .cell {
  height: 60px; /* 和行高一致 */
  line-height: 60px; /* 垂直居中文本 */

}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {

  margin-bottom: 48px !important;
}

</style>
<style scoped>
.container {
  position: relative;
  min-height: 100vh; /* 确保容器高度至少占满整个视口 */
}

.content {
  padding-bottom: 60px; /* 留出底部按钮列的高度 */
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  display: flex;
  justify-content: flex-end; /* 按钮靠右对齐 */
  padding: 10px;
  border-top: 1px solid #ccc; /* 可选：添加分割线 */
}

.confirm-button {
  margin-left: 20px;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.confirm-button:hover {
  background-color: #0056b3;
}
</style>
